<template>
    <div >
    <div class="pos">
        <div id="myChart" :style="{width:'600px',height:'300px'}"></div>
       <div id="score" :style="{width:'800px',height:'500px'}"></div>
    </div>
    </div>
</template>
<script>
export default {
  props:['studentName'],
    data () {
      return {
         studentName:this.studentName 
      }
},
    methods: {
      drawChart(a,b) { 
         let mybar = this.$echarts.init(document.getElementById("myChart")); 
         let option = {
           title: { text: "考试成绩折线图分析" }, 
           xAxis: {
           type: 'category',
           data:a
          },
       yAxis: {
        type: 'value'
        },
       series: [{
        data: b,
        type: 'line',
        smooth: true
       }]
       };        
            mybar.setOption(option)
      },
      chart(a,b){
           let that=this
           let mybar = this.$echarts.init(document.getElementById("score"));
           let option1= {
           title: { text: "考试成绩柱状图分析" }, 
           color: ['#3398DB'],
           tooltip : {
           trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
         grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
       xAxis : [
        {
            type : 'category',
            data : a,
            axisTick: {
                alignWithLabel: true
            }
        }
       ],
         yAxis : [
          {
            type : 'value'
          }
       ],
       series : [
        {
            name:'考试成绩',
            type:'bar',
            barWidth: '60%',
            data:b
        }
        ]
        };

       mybar.setOption(option1)

        }

    },

    
    beforeMount() {
    let  Msg={whoAnswered:this.studentName}
          this.$axios({
        method: "post",
        url: "http://"+this.urlpath+"/FindOneStudentAnsweredPage",
        data:Msg
      }).then(res => {
        console.log(res)
        let data1=[]
        let data2=[]
           res.data.map(item=>{
             data1.push(item.answeredTime)
             data2.push(item.scare)
           })
       this.drawChart(data1,data2)
         this.chart(data1,data2)
      })
    },
}
</script>
<style scoped>
.pos{
  display: flex;
  flex-direction: column
}
</style>